<template>
    <div class="admin-index">
        <el-container>
            <!--            <el-aside width="auto">-->
            <!--                <div style="width:100%;height: 60px;display: flex;justify-content: center;align-items: center">-->
            <!--                    <h4>管理员</h4>-->
            <!--                </div>-->
<!--                            <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen"-->
<!--                                     @close="handleClose" :collapse="isCollapse">-->
<!--                                <el-menu-item index="/admin/studentRegisterList">-->
<!--                                    <i class="el-icon-user"></i>-->
<!--                                    <span slot="title">学员待报名列表</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="/admin/orgList">-->
<!--                                    <i class="el-icon-setting"></i>-->
<!--                                    <span slot="title">机构列表</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="/admin/examTime">-->
<!--                                    <i class="el-icon-tickets"></i>-->
<!--                                    <span slot="title">科目列表</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="/admin/studentScore">-->
<!--                                    <i class="el-icon-notebook-2"></i>-->
<!--                                    <span slot="title">报考记录</span>-->
<!--                                </el-menu-item>-->
<!--                            </el-menu>-->
            <!--            </el-aside>-->
            <el-container>
                <el-header>
                    <el-dropdown class="user-name">
                          <span class="el-dropdown-link">
                            <span>欢迎您：管理员</span>:{{username}}
                              <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-error" @click.native="close">退出</el-dropdown-item>
                            <!-- <el-dropdown-item icon="el-icon-error"></el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!--                    <i :class="isCollapse? 'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse = !isCollapse"></i>-->
                    <div style="display: flex">
                        <div>
                            <img style="cursor: pointer;height: 30px;margin-top: 15px;" @click="toIndex" src="../../assets/logo4.png">
                        </div>
                        <el-menu background-color="#302C42" text-color="white" active-text-color="#ffd04b" :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                            <el-menu-item index="/admin/studentRegisterList">
                                <i class="el-icon-user"></i>
                                <span slot="title">学员档案列表</span>
                            </el-menu-item>
                            <el-menu-item index="/admin/orgList">
                                <i class="el-icon-setting"></i>
                                <span slot="title">机构列表</span>
                            </el-menu-item>
                            <el-menu-item index="/admin/examTime">
                                <i class="el-icon-tickets"></i>
                                <span slot="title">科目列表</span>
                            </el-menu-item>
                            <el-menu-item index="/admin/studentScore">
                                <i class="el-icon-notebook-2"></i>
                                <span slot="title">报考记录</span>
                            </el-menu-item>
                        </el-menu>
<!--                        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen"-->
<!--                                           @close="handleClose" :collapse="isCollapse">-->
<!--                        <el-menu-item index="/admin/studentRegisterList">-->
<!--                            <span slot="title">学员待报名列表</span>-->
<!--                        </el-menu-item>-->
<!--                        <el-menu-item index="/admin/orgList">-->
<!--                            <span slot="title">机构列表</span>-->
<!--                        </el-menu-item>-->
<!--                        <el-menu-item index="/admin/examTime">-->
<!--                            <span slot="title">科目列表</span>-->
<!--                        </el-menu-item>-->
<!--                        <el-menu-item index="/admin/studentScore">-->
<!--                            <span slot="title">报考记录</span>-->
<!--                        </el-menu-item>-->
<!--                    </el-menu>-->
                    </div>
                </el-header>
                <el-main>
                    <router-view :currentPage="currentPage" :pageSize="pageSize" @total="handleTotal"></router-view>
                </el-main>
                <el-footer>
                    <div style="display: flex;align-items: center;width: 100%;justify-content: center">
                        <span class="footer-content">Copyright © All Right By <a style="color: white;cursor: pointer" href="#">上海财才网信息科技有限公司</a></span>
                    </div>
                    <!--分页组件-->
                    <!--                    <el-pagination-->
                    <!--                            background-->
                    <!--                            @size-change="handleSizeChange"-->
                    <!--                            @current-change="handleCurrentChange"-->
                    <!--                            :current-page="currentPage"-->
                    <!--                            :page-sizes="[5, 10, 15, 20]"-->
                    <!--                            :page-size="pageSize"-->
                    <!--                            layout="total, sizes, prev, pager, next, jumper"-->
                    <!--                            :total="total">-->
                    <!--                    </el-pagination>-->
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import UpLoadCsvFile from '../../components/uploadCsvFile/UpLoadCsvFile.vue'
    export default {
        name: "index",
        data() {
            return {
                isCollapse: true,
                //每页页数
                pageSize: 5,
                //当前页
                currentPage: 1,
                //总条数
                total: 0
            };
        },
        methods: {
            toIndex(){
                this.$router.push('/admin/studentRegisterList')
            },
            handleSelect(key, keyPath) {
                this.$router.push(key)
            },
            handleTotal(total) {
                console.log('子传父', total);
                this.total = total;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //退出
            close() {
                console.log('退出');
                this.$cookies.remove('token');
                this.$store.state.token = "";
                location.reload();
            }
        },
        computed: {
            username() {
                return this.$store.state.user_name
            }
        }
    }
</script>

<style>
    .el-table .el-table__cell{
        padding: 6px 0px;
    }
    .headerButton {
        line-height: 60px;
        width: 200px;
        text-align: center
    }

    .headerButton:hover {
        cursor: pointer;
        background-color: #409EFF;
    }

    .el-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }

    .el-pagination {
        padding: 0;
    }

    .el-header, .el-footer {
        background-color: #302C42;
        color: #333;
        height: 60px;
        line-height: 0px;
        position: relative;
    }

    .el-aside {
        background-color: #302C42;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        min-height: calc(100vh - 120px);
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: white;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .demonstration {
        display: block;
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>

<style scoped>
    .footer-content{
        font-size: 12px;
        color: white;
    }
    .el-icon-s-unfold {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        left: 10px;
        padding: 10px;
    }

    .el-icon-s-unfold:hover {
        background-color: white;
    }

    .el-icon-s-fold {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        left: 10px;
        padding: 10px;
    }

    .el-icon-s-fold:hover {
        background-color: white;
    }

    .user-name {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        right: 50px;
    }
</style>
